<template>
  <XenPageLayout
    title="员工履历详情"
    title-align="left"
    :show-back="true"
    navbar-bg-color="#059669"
    navbar-text-color="#ffffff"
    navbar-icon-color="#ffffff"
    :loading="loading"
    :error="hasError"
    @retry="loadDetail"
  >
    <view class="detail-page">
      <view v-if="!loading && !hasError" class="detail-container">
        <!-- 员工履历详情卡片 -->
        <view class="detail-card">
          <view class="detail-header">
            <text class="header-title">{{
              resumeDetail.ResumeType || "履历记录"
            }}</text>
            <text class="header-subtitle">{{
              formatDateRange(resumeDetail.StartDate, resumeDetail.EndDate)
            }}</text>
          </view>

          <view class="detail-content">
            <!-- 基本信息 -->
            <view class="info-section">
              <view class="section-header">
                <view class="section-icon">
                  <uni-icons type="folder-add" size="20" color="#FFFFFF" />
                </view>
                <text class="section-title">基本信息</text>
              </view>
              <view class="info-grid">
                <view v-if="resumeDetail.ResumeType" class="info-item">
                  <text class="info-label">履历类型</text>
                  <text class="info-value resume-type">{{
                    resumeDetail.ResumeType
                  }}</text>
                </view>
                <view v-if="resumeDetail.StartDate" class="info-item">
                  <text class="info-label">起始日期</text>
                  <text class="info-value">{{
                    formatDate(resumeDetail.StartDate)
                  }}</text>
                </view>
                <view v-if="resumeDetail.EndDate" class="info-item">
                  <text class="info-label">结束日期</text>
                  <text class="info-value">{{
                    formatDate(resumeDetail.EndDate)
                  }}</text>
                </view>
                <view v-if="resumeDetail.TransferReason" class="info-item">
                  <text class="info-label">调整原因</text>
                  <text class="info-value">{{
                    resumeDetail.TransferReason
                  }}</text>
                </view>
                <view v-if="resumeDetail.Remark" class="info-item">
                  <text class="info-label">备注</text>
                  <text class="info-value">{{ resumeDetail.Remark }}</text>
                </view>
              </view>
            </view>

            <!-- 原岗位信息 -->
            <view v-if="hasOriginalInfo" class="info-section">
              <view class="section-header">
                <view class="section-icon">
                  <uni-icons type="minus-filled" size="20" color="#FFFFFF" />
                </view>
                <text class="section-title">原岗位信息</text>
              </view>
              <view class="info-grid">
                <view
                  v-if="
                    resumeDetail.OriginalGroupName ||
                    resumeDetail.OriginalGroup?.Text
                  "
                  class="info-item"
                >
                  <text class="info-label">原部门</text>
                  <text class="info-value">{{
                    resumeDetail.OriginalGroupName ||
                    resumeDetail.OriginalGroup?.Text ||
                    "-"
                  }}</text>
                </view>
                <view
                  v-if="
                    resumeDetail.OriginalPositionName ||
                    resumeDetail.OriginalPosition?.Text
                  "
                  class="info-item"
                >
                  <text class="info-label">原岗位</text>
                  <text class="info-value">{{
                    resumeDetail.OriginalPositionName ||
                    resumeDetail.OriginalPosition?.Text ||
                    "-"
                  }}</text>
                </view>
                <view v-if="resumeDetail.OriginalRank" class="info-item">
                  <text class="info-label">原职级</text>
                  <text class="info-value">{{
                    resumeDetail.OriginalRank
                  }}</text>
                </view>
                <view v-if="resumeDetail.OriginalBaseSalary" class="info-item">
                  <text class="info-label">原基本薪资</text>
                  <text class="info-value salary-value">{{
                    resumeDetail.OriginalBaseSalary
                  }}</text>
                </view>
                <view
                  v-if="resumeDetail.OriginalPositionSalary"
                  class="info-item"
                >
                  <text class="info-label">原岗位薪资</text>
                  <text class="info-value salary-value">{{
                    resumeDetail.OriginalPositionSalary
                  }}</text>
                </view>
                <view
                  v-if="resumeDetail.OriginalPerformanceSalary"
                  class="info-item"
                >
                  <text class="info-label">原绩效薪资</text>
                  <text class="info-value salary-value">{{
                    resumeDetail.OriginalPerformanceSalary
                  }}</text>
                </view>
              </view>
            </view>

            <!-- 新岗位信息 -->
            <view v-if="hasNewInfo" class="info-section">
              <view class="section-header">
                <view class="section-icon">
                  <uni-icons type="plus-filled" size="20" color="#FFFFFF" />
                </view>
                <text class="section-title">新岗位信息</text>
              </view>
              <view class="info-grid">
                <view
                  v-if="
                    resumeDetail.NewGroupName || resumeDetail.NewGroup?.Text
                  "
                  class="info-item"
                >
                  <text class="info-label">新部门</text>
                  <text class="info-value">{{
                    resumeDetail.NewGroupName ||
                    resumeDetail.NewGroup?.Text ||
                    "-"
                  }}</text>
                </view>
                <view
                  v-if="
                    resumeDetail.NewPositionName ||
                    resumeDetail.NewPosition?.Text
                  "
                  class="info-item"
                >
                  <text class="info-label">新岗位</text>
                  <text class="info-value">{{
                    resumeDetail.NewPositionName ||
                    resumeDetail.NewPosition?.Text ||
                    "-"
                  }}</text>
                </view>
                <view v-if="resumeDetail.NewRank" class="info-item">
                  <text class="info-label">新职级</text>
                  <text class="info-value">{{ resumeDetail.NewRank }}</text>
                </view>
                <view v-if="resumeDetail.NewBaseSalary" class="info-item">
                  <text class="info-label">新基本薪资</text>
                  <text class="info-value salary-value">{{
                    resumeDetail.NewBaseSalary
                  }}</text>
                </view>
                <view v-if="resumeDetail.NewPositionSalary" class="info-item">
                  <text class="info-label">新岗位薪资</text>
                  <text class="info-value salary-value">{{
                    resumeDetail.NewPositionSalary
                  }}</text>
                </view>
                <view
                  v-if="resumeDetail.NewPerformanceSalary"
                  class="info-item"
                >
                  <text class="info-label">新绩效薪资</text>
                  <text class="info-value salary-value">{{
                    resumeDetail.NewPerformanceSalary
                  }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </XenPageLayout>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import Api from "../api";
import type { ISysPersonResume } from "../api/interface";
import XenPageLayout from "@/layouts/XenPageLayout.vue";

// 响应式数据
const loading = ref(true);
const hasError = ref(false);
const resumeId = ref<string>("");

// 员工履历详情数据
const resumeDetail = ref<ISysPersonResume>({
  ID: "",
  PersonId: null,
  Person: undefined,
  TransferRequestId: null,
  TransferRequest: undefined,
  ResumeType: "",
  StartDate: null,
  EndDate: null,
  OriginalGroupId: null,
  OriginalGroup: undefined,
  OriginalPositionId: null,
  OriginalPosition: undefined,
  OriginalRank: "",
  OriginalBaseSalary: "",
  OriginalPositionSalary: "",
  OriginalPerformanceSalary: "",
  NewGroupId: null,
  NewGroup: undefined,
  NewPositionId: null,
  NewPosition: undefined,
  NewRank: "",
  NewBaseSalary: "",
  NewPositionSalary: "",
  NewPerformanceSalary: "",
  TransferReason: "",
  Remark: "",
});

// 计算属性：判断是否有原岗位信息
const hasOriginalInfo = computed(() => {
  return !!(
    resumeDetail.value.OriginalGroupName ||
    resumeDetail.value.OriginalGroup?.Text ||
    resumeDetail.value.OriginalPositionName ||
    resumeDetail.value.OriginalPosition?.Text ||
    resumeDetail.value.OriginalRank ||
    resumeDetail.value.OriginalBaseSalary ||
    resumeDetail.value.OriginalPositionSalary ||
    resumeDetail.value.OriginalPerformanceSalary
  );
});

// 计算属性：判断是否有新岗位信息
const hasNewInfo = computed(() => {
  return !!(
    resumeDetail.value.NewGroupName ||
    resumeDetail.value.NewGroup?.Text ||
    resumeDetail.value.NewPositionName ||
    resumeDetail.value.NewPosition?.Text ||
    resumeDetail.value.NewRank ||
    resumeDetail.value.NewBaseSalary ||
    resumeDetail.value.NewPositionSalary ||
    resumeDetail.value.NewPerformanceSalary
  );
});

// 加载详情数据
const loadDetail = async () => {
  if (!resumeId.value) {
    uni.showToast({
      title: "缺少员工履历ID参数",
      icon: "none",
    });
    return;
  }

  loading.value = true;
  hasError.value = false;

  try {
    console.log("正在获取员工履历详情，ID:", resumeId.value);

    // 调用真实的API接口
    const res = await Api().getEmployeeResumeDetail(resumeId.value);
    console.log("员工履历详情接口返回:", res);

    if (res && res.Entity) {
      resumeDetail.value = res.Entity;
      console.log("获取员工履历详情成功:", resumeDetail.value);
    } else {
      hasError.value = true;
      console.log("员工履历详情数据异常，返回数据:", res);
      uni.showToast({
        title: "获取员工履历详情失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("获取员工履历详情异常:", error);
    hasError.value = true;
    uni.showToast({
      title: "获取员工履历详情失败",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 格式化日期
const formatDate = (dateStr: string | Date | null | undefined) => {
  if (!dateStr) return "-";
  try {
    const date = new Date(dateStr);
    return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(
      2,
      "0",
    )}.${String(date.getDate()).padStart(2, "0")}`;
  } catch {
    return "-";
  }
};

// 格式化日期范围
const formatDateRange = (
  startDate: string | Date | null | undefined,
  endDate: string | Date | null | undefined,
) => {
  const start = formatDate(startDate);
  const end = formatDate(endDate);

  if (start === "-" && end === "-") return "日期未知";
  if (start === "-") return `至${end}`;
  if (end === "-") return `${start}至今`;
  return `${start} - ${end}`;
};

// 页面加载
onMounted(() => {
  // 获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  // @ts-ignore
  const options = currentPage.options || {};

  if (options.id) {
    resumeId.value = options.id;
    loadDetail();
  } else {
    loading.value = false;
    uni.showToast({
      title: "缺少必要参数",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});
</script>

<style lang="scss" scoped>
.detail-page {
  padding: 16px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.detail-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.detail-header {
  background: linear-gradient(135deg, #059669, #10b981);
  color: white;
  padding: 20px;

  .header-title {
    font-size: 20px;
    font-weight: bold;
    display: block;
    margin-bottom: 4px;
  }

  .header-subtitle {
    font-size: 14px;
    opacity: 0.9;
  }
}

.detail-content {
  padding: 24px;
}

.info-section {
  margin-bottom: 32px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f3f4f6;
}

.section-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #059669, #10b981);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #374151;
}

.info-grid {
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;

    &:last-child {
      border-bottom: none;
    }
  }
}

.info-label {
  color: #6b7280;
  font-weight: 500;
  min-width: 120px;
  flex-shrink: 0;
  font-size: 14px;
}

.info-value {
  color: #374151;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
  flex: 1;
  font-size: 14px;

  &.resume-type {
    color: #059669;
    font-weight: 600;
  }

  &.salary-value {
    color: #2563eb;
    font-weight: 600;
  }
}
</style>
